<template>
  <el-container>
    <!-- 头 -->
    <myHeader></myHeader>
    <div class="search_area">
      <div class="belike_nav">
        <div class="belike_nav_tab">
          <div class="green_logo">
            <i class="icon iconfont icon-shouye"></i>
          </div>
          <ul>
            <li @click="index">首页</li>
            <li @click="allhouse">房源</li>
            <li @click="uphouse">发布房源</li>
            <li @click="post">帖子</li>
          </ul>
        </div>
      </div>
      <div class="search">
        <el-row class="search__wrap">
          <el-col
            :span="6"
            style="float: left; margin-left: 35px; width: 270px; hight: 40px"
          >
            <el-input
              v-model="title"
              type="text"
              prefix-icon="el-icon-search"
              placeholder="请输入房源标题"
              style="width: 270px; cursor: pointer"
              @keyup.enter.native="getAllKb"
              @input="(pageNum = 1), load()"
            ></el-input>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-container>
      <el-main>
        <!-- 筛选栏 -->
        <div class="CationBox">
          <div class="row">
            <div class="name">地区：</div>
            <div class="content" @click="(pageNum = 1), load()">
              <div
                v-for="(item, index) in CityList"
                :key="index"
                @click="CityVar = item"
                :class="['item', CityVar == item ? 'actvCss' : '']"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="row">
            <div class="name">租金：</div>
            <div class="content" @click="(pageNum = 1), load()">
              <div
                :class="isActive == 1 ? 'actvCss' : 'item'"
                @click="(MoneyRange = null), changeClass(1)"
              >
                全部
              </div>
              <div
                :class="isActive == 2 ? 'actvCss' : 'item'"
                @click="(MoneyRange = '<1500'), changeClass(2)"
              >
                1500元以下
              </div>
              <div
                :class="isActive == 3 ? 'actvCss' : 'item'"
                @click="(MoneyRange = '1500-3000'), changeClass(3)"
              >
                1500-3000元
              </div>
              <div
                :class="isActive == 4 ? 'actvCss' : 'item'"
                @click="(MoneyRange = '3000-4500'), changeClass(4)"
              >
                3000-4500元
              </div>
              <div
                :class="isActive == 5 ? 'actvCss' : 'item'"
                @click="(MoneyRange = '4500-6000'), changeClass(5)"
              >
                4500-6000元
              </div>
              <div
                :class="isActive == 6 ? 'actvCss' : 'item'"
                @click="(MoneyRange = '6000-8000'), changeClass(6)"
              >
                6000-8000元
              </div>
              <div
                :class="isActive == 7 ? 'actvCss' : 'item'"
                @click="(MoneyRange = '8000-10000'), changeClass(7)"
              >
                8000-10000元
              </div>
              <div
                :class="isActive == 8 ? 'actvCss' : 'item'"
                @click="(MoneyRange = '>10000'), changeClass(8)"
              >
                10000元以上
              </div>
              <!-- <div
                v-for="(item, index) in MoneyList"
                :key="index"
                @click="MoneyVar = item"
                :class="['item', MoneyVar == item ? 'actvCss' : '']"
              >
                {{ item }}
              </div> -->
            </div>
          </div>
          <div class="row">
            <div class="name">户型：</div>
            <div class="content" @click="(pageNum = 1), load()">
              <div
                v-for="(item, index) in TypeList"
                :key="index"
                @click="changeType(item)"
                :class="['item', TypeVar === typeMap[item] ? 'actvCss' : '']"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="row">
            <div class="name">类型：</div>
            <div class="content" @click="(pageNum = 1), load()">
              <div
                v-for="(item, index) in ModeList"
                :key="index"
                @click="changeMode(item)"
                :class="['item', ModeVar === item ? 'actvCss' : '']"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="row rowtype">
            <div class="name">状态：</div>
            <div class="content" @click="(pageNum = 1), load()">
              <div
                v-for="(item, index) in StateList"
                :key="index"
                @click="changeState(item)"
                :class="['item', StateVar === stateMap[item] ? 'actvCss' : '']"
              >
                {{ item }}
              </div>
            </div>
          </div>
        </div>
        <!-- 筛选栏结束 -->

        <!-- 房源展示 -->
        <div class="houseinfoBox" v-if="tableData.length">
          <el-row
            class="houselist"
            v-for="(item, index) in tableData"
            :key="index"
          >
            <el-col :span="24">
              <div
                class="block"
                @click="$router.push('/housedetail?id=' + item.id)"
              >
                <el-image
                  v-if="item.firstImage"
                  style="width: 230px; height: 178px"
                  :src="item.firstImage"
                  :key="item.id"
                  :lazy="true"
                ></el-image>

                <div class="info">
                  <p class="title">{{ item.title }}</p>
                  <p class="detail">
                    {{ item.bedroom }}室{{ item.living }}厅|{{
                      item.area
                    }}平米|{{ item.floor }}层（共{{ item.allfloor }}层）
                    {{ item.mastername }}
                  </p>
                  <p class="houseCity">{{ item.houseSite }}</p>
                </div>

                <div class="money">
                  <p>
                    <strong>{{ item.money }}</strong>
                    元/月
                  </p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div v-else class="nullCss">暂无相关商品~</div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

        <!-- 房源展示结束 -->
      </el-main>
    </el-container>
    <!-- 尾 -->
    <el-footer><myFooter></myFooter></el-footer>
  </el-container>
</template>


<script>
import request from "@/utils/request";
import myHeader from "../../components/myHeader.vue";
import myFooter from "../../components/myFooter.vue";
export default {
  components: {
    myHeader,
    myFooter,
  },
  data() {
    return {
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      isActive: 1,
      CityVar: "全部", // 表示当前选中的位置
      PrimMoney: "全部",
      MoneyVar: "全部", // 表示当前选中的租金
      MoneyVarf: 0,
      MoneyRange: null,
      TypeVar: null, // 表示当前选中的房型
      ModeVar: "全部", // 表示当前选中的租房类型
      mode: "",
      StateVar: null, // 表示当前选中的租房是否可租
      CityList: [
        "全部",
        "三明",
        "永安",
        "沙县",
        "宁化",
        "尤溪",
        "泰宁",
        "厦门",
        "漳州",
        "泉州",
        "莆田",
        "南平",
        "龙岩",
      ], // 城市（根据数据库里的数据进行修改）
      MoneyList: [
        "全部",
        "1500元以下",
        "1500-3000元",
        "3000-4500元",
        "4500-6000元",
        "6000-8000元",
        "8000-10000元",
        "10000元以上",
      ], // 租金（根据数据库里的数据进行修改）
      TypeList: ["全部", "一室", "二室", "三室", "四室"], // 房型
      typeMap: {
        全部: null,
        一室: 1,
        二室: 2,
        三室: 3,
        四室: 4,
      },
      ModeList: ["全部", "整租", "合租"], // 租房类型
      StateList: ["全部", "可租", "不可租"],
      stateMap: {
        全部: null,
        可租: 0,
        不可租: 1,
      }, //是否可租
      total: 0,
      pageNum: 1,
      pageSize: 5,
      title: null,
      tableData: [],
      houseinfo: [],
    };
  },
  created() {
    this.title = this.$route.query.title;
    this.load();
  },
  methods: {
    async load() {
      await request
        .get("/house/page", {
          params: {
            title: this.title,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            moneyRange: this.MoneyRange,
            city: this.CityVar === "全部" ? null : this.CityVar,
            type: this.mode,
            rentIs: this.StateVar,
            bedroom: this.TypeVar,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
      for (let i = 0; i < this.tableData.length; i++) {
        const imgRes = await request.get(
          `/house/firstimg/${this.tableData[i].houseAccount}`
        );
        const userRes = await request.get(`/user/${this.tableData[i].ownerId}`);
        if (imgRes.code === 200) {
          this.$set(this.tableData[i], "firstImage", imgRes.data);
        }
        if (userRes.code === 200) {
          console.log(userRes.data);
          this.$set(this.tableData[i], "mastername", userRes.data.nikeName);
        }
      }
    },
    jiancha() {
      console.log(this.MoneyRange);
      // console.log(this.MoneyVar);
    },
    changeClass(i) {
      this.isActive = i;
    },
    changeType(type) {
      this.TypeVar = this.typeMap[type];
    },
    changeMode(item) {
      this.ModeVar = item;
      if (item === "全部") {
        this.mode = null;
      } else if (item === "整租") {
        this.mode = "WHOLE_RENT";
      } else if (item === "合租") {
        this.mode = "SHARED_RENT";
      }
    },
    changeState(state) {
      this.StateVar = this.stateMap[state];
    },
    // 路由
    // housedetail() {
    //   this.$router.push("/housedetail");
    // },
    //   路由跳转
    index() {
      this.$router.push("/");
    },
    allhouse() {
      this.$router.push("/allhouse");
    },
    post() {
      this.$router.push("/post");
    },
    uphouse() {
      this.$router.push("/uphouse");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.load();
    },
  },
  computed: {
    Comhouseinfo() {
      return this.houseinfo.filter((item) => {
        if (
          (this.CityVar == "全部" || this.CityVar == item.houseCity) &&
          (this.MoneyVar == "全部" ||
            (this.MoneyVar > item.money && this.MoneyVarf < item.money)) &&
          (this.TypeVar == "全部" || this.TypeVar == item.Type) &&
          (this.ModeVar == "全部" ||
            this.ModeVar == (item.type == 0 ? "整租" : "合租")) &&
          (this.StateVar == "全部" || this.StateVar == item.houseState)
        ) {
          return item; // 把符合条件的数据返回,模板中通过this.Comhouseinfo可直接动态读取数据
        }
      });
    },
  },
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header,
.el-footer {
  /* background-color: #b3c0d1; */
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  /* background-color: #d3dce6; */
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  overflow: hidden;
}
/* 搜索框区域 */

.search_area {
  width: 100%;
  min-width: 1150px;
  height: 150px;
  padding: 25px 0;
  background: #f5f5f6;
  box-sizing: border-box;
  z-index: 5;
  position: relative;
}
.belike_nav {
  width: 1150px;
  height: 30px;
  margin: 0 auto 30px 300px;
  position: absolute;
}
.belike_nav .belike_nav_tab,
.belike_nav .belike_nav_tab li {
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  cursor: pointer;
}
.green_logo {
  position: absolute;
  color: #4b84d0;
  margin-left: 37px;
}
.green_logo i {
  font-size: 50px;
}

.belike_nav .belike_nav_tab ul {
  margin-left: 73px;
}
.belike_nav .belike_nav_tab li {
  line-height: 25px;
  font-size: 16px;
  margin-right: 30px;
  position: relative;
  font-weight: 700;
  list-style: none;
}

.search {
  margin-top: 65px;
  margin-bottom: 24px;
  position: absolute;
  width: 1150px;
  margin-left: 300px;
}
.search .search__wrap {
  display: inline-block;
  width: 710px;
  line-height: 46px;
  font-size: 14px;
  border-radius: 2px;
}
.el-input {
  width: 400px !important;
}
/* 搜索框区域结束 */

/* 筛选栏 */
.CationBox {
  width: 1100px;
  margin-left: 211px;
  border-bottom: 1px solid #ccc;
}
.row {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 3px 100px;
}
.row > div {
  flex-shrink: 0;
}
.row .name {
  font-weight: 600;
}
.row .content {
  flex: 1;
  display: flex;
  margin-left: 20px;
}
.row .content .item {
  border-radius: 3px;
  color: #666;
  padding: 5px 12px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.row .content .actvCss {
  border-radius: 3px;
  color: #666;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  background: #00b8e0;
  color: #fff;
}
.rowtype {
  margin-bottom: 20px;
}
/* 筛选栏结束 */

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.houselist {
  /* margin-bottom: 20px; */
  background-color: #fff;
  border-bottom: 1px dashed #e6e6e6;
  cursor: pointer;
  /* width: 900px; */
  width: 920px;
  height: 220px;
  padding: 20px;
  position: relative;
  /* border-top: 1px dashed black; */
  margin-left: -430px;
  left: 50%;
}
.el-col {
  border-radius: 4px;
}
/* .bg-purple-dark {
  background: #99a9bf;
} */
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
/* .grid-content {
  border-radius: 4px;
  min-height: 36px;
} */

.block {
  position: relative;
}
.el-image {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  margin-left: -50%;
  /* margin-top: -9px; */
}
.info {
  position: absolute;
  color: #797979;
  /* float: left; */
  left: 30%;
  font-size: 14px;
  overflow: hidden;
  /* padding-left: 20px; */
  width: 460px;
  text-align: left;
  font-family: Microsoft YaHei, 微软雅黑, Hiragino Sans GB, tahoma, arial,
    simhei;
}
.title {
  color: #333;
  font-size: 20px;
  font-weight: 700;
  font-family: "Microsoft YaHei";
}
.detail {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.housesite {
  color: #666;
  font-size: 14px;
}
.money {
  position: absolute;
  float: right;
  width: 112px;
  right: 5%;
  margin-top: 5%;
  color: #eb5f00;
  font-size: 20px;
  font-weight: 700;
}
.nullCss {
  margin: 60px auto;
  font-size: 14px;
  text-align: center;
  color: #999;
}
</style>